<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="nav-left" @tap="goBack">
				<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
				<text class="nav-text">返回</text>
			</view>
			<view class="nav-title">Web View 测试</view>
			<view class="nav-right" @tap="goHome">
				<uni-icons type="home" size="24" color="#333"></uni-icons>
			</view>
		</view>

		<!-- 重要提醒 -->
		<view class="warning-section">
			<view class="warning-header">
				<uni-icons type="info" size="20" color="#ff6600"></uni-icons>
				<text class="warning-title">重要提醒</text>
			</view>
			<view class="warning-content">
				<text class="warning-text">在微信开发者工具中运行时，web-view中的网页可能无法正常调用麦克风和摄像头权限，这是正常现象。请使用真机测试以获得完整功能。</text>
			</view>
		</view>

		<!-- 说明信息 -->
		<view class="info-section">
			<view class="info-header">
				<uni-icons type="info" size="20" color="#1e90ff"></uni-icons>
				<text class="info-title">功能说明</text>
			</view>
			<view class="info-content">
				<text class="info-text">本页面使用 web-view 组件嵌入外部网页，用于测试在小程序中集成第三方直播平台的功能。</text>
			</view>
		</view>

		<!-- web-view 区域 -->
		<view class="webview-container">
			<view class="webview-header">
				<text class="webview-title">Polyv 直播平台</text>
			</view>
			
			<view class="webview-wrapper">
				<web-view :src="webViewUrl"></web-view>
			</view>
			
			<view class="webview-info">
				<view class="info-row">
					<text class="label">加载地址:</text>
					<text class="url-text">{{ webViewUrl }}</text>
				</view>
				<view class="info-row">
					<text class="label">状态:</text>
					<text class="status-text">加载中...</text>
				</view>
			</view>
		</view>

		<!-- 权限说明 -->
		<view class="permission-section">
			<view class="section-header">
				<text class="section-title">权限说明</text>
			</view>
			<view class="permission-content">
				<view class="permission-item">
					<text class="permission-number">1.</text>
					<text class="permission-desc">直播功能需要麦克风和摄像头权限</text>
				</view>
				<view class="permission-item">
					<text class="permission-number">2.</text>
					<text class="permission-desc">在真机测试时会自动弹出权限请求</text>
				</view>
				<view class="permission-item">
					<text class="permission-number">3.</text>
					<text class="permission-desc">请确保在手机设置中允许小程序使用相关权限</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="controls">
			<button class="control-btn" @tap="refreshWebView">刷新页面</button>
			<button class="control-btn" @tap="copyUrl">复制链接</button>
			<button class="control-btn" @tap="openInBrowser">在浏览器中打开</button>
			<button class="control-btn" @tap="navigateToTest">真机测试说明</button>
		</view>

		<!-- 注意事项 -->
		<view class="notes-section">
			<view class="section-header">
				<text class="section-title">注意事项</text>
			</view>
			<view class="notes-content">
				<view class="note-item">
					<text class="note-number">1.</text>
					<text class="note-desc">web-view 组件需要配置业务域名，个人开发者账号可能无法使用</text>
				</view>
				<view class="note-item">
					<text class="note-number">2.</text>
					<text class="note-desc">所嵌入的网页必须支持 HTTPS 协议</text>
				</view>
				<view class="note-item">
					<text class="note-number">3.</text>
					<text class="note-desc">需要在微信公众平台配置相应的业务域名</text>
				</view>
				<view class="note-item">
					<text class="note-number">4.</text>
					<text class="note-desc">部分网页功能可能在小程序环境中受限</text>
				</view>
				<view class="note-item">
					<text class="note-number">5.</text>
					<text class="note-desc">开发者工具中无法正常使用音视频权限，请使用真机测试</text>
				</view>
				<view class="note-item">
					<text class="note-number">6.</text>
					<text class="note-desc">点击顶部导航栏的"返回"按钮可返回小程序</text>
				</view>
			</view>
		</view>

		<!-- 日志区域 -->
		<view class="log-section">
			<view class="section-header">
				<text class="section-title">运行日志</text>
				<text class="clear-log" @tap="clearLog">清空日志</text>
			</view>
			<scroll-view class="log-container" scroll-y="true" :scroll-top="logScrollTop">
				<view 
					v-for="(log, index) in logs" 
					:key="index" 
					class="log-item"
					:class="'log-' + log.type"
				>
					<text class="log-time">[{{ log.time }}]</text>
					<text class="log-content">{{ log.content }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// web-view URL
				webViewUrl: 'http://1.94.105.36:8080/players/rtc_player.html?autostart=true&stream=livestream&schema=http',
				// 日志相关
				logs: [],
				logScrollTop: 0,
				logId: 0
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			// 返回首页
			goHome() {
				uni.reLaunch({
					url: '/pages/home/home'
				});
			},
			
			// 刷新 web-view
			refreshWebView() {
				this.addLog('info', '刷新 web-view 页面');
				// 通过改变URL触发刷新
				const url = this.webViewUrl;
				this.webViewUrl = '';
				this.$nextTick(() => {
					this.webViewUrl = url;
				});
			},
			
			// 复制链接
			copyUrl() {
				uni.setClipboardData({
					data: this.webViewUrl,
					success: () => {
						this.addLog('info', '链接已复制到剪贴板');
					},
					fail: (err) => {
						this.addLog('error', `复制链接失败: ${JSON.stringify(err)}`);
					}
				});
			},
			
			// 在浏览器中打开
			openInBrowser() {
				// #ifdef H5
				window.open(this.webViewUrl);
				// #endif
				
				// #ifndef H5
				uni.setClipboardData({
					data: this.webViewUrl,
					success: () => {
						this.addLog('info', '链接已复制，请在浏览器中粘贴打开');
					}
				});
				// #endif
				
				this.addLog('info', '尝试在浏览器中打开链接');
			},
			
			// 真机测试说明
			navigateToTest() {
				uni.showModal({
					title: '真机测试说明',
					content: '请使用微信开发者工具的"真机测试"功能或扫描二维码在微信中打开，以确保麦克风和摄像头权限能正常工作。',
					showCancel: false,
					confirmText: '知道了'
				});
			},
			
			// 添加日志
			addLog(type, content) {
				const now = new Date();
				const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
				
				this.logs.push({
					id: this.logId++,
					time: timeStr,
					type: type, // info, warn, error
					content: content
				});
				
				// 滚动到底部
				this.$nextTick(() => {
					this.logScrollTop = 999999;
				});
				
				// 控制台输出日志
				switch(type) {
					case 'error':
						console.error(`[web-view测试] ${timeStr} ${content}`);
						break;
					case 'warn':
						console.warn(`[web-view测试] ${timeStr} ${content}`);
						break;
					default:
						console.log(`[web-view测试] ${timeStr} ${content}`);
				}
			},
			
			// 清空日志
			clearLog() {
				this.logs = [];
				this.logId = 0;
				this.addLog('info', '日志已清空');
			}
		},
		
		mounted() {
			this.addLog('info', 'Web View 测试页面初始化完成');
			this.addLog('info', `加载地址: ${this.webViewUrl}`);
			this.addLog('warn', '注意：开发者工具中无法正常使用音视频权限，请使用真机测试');
			this.addLog('info', '提示：点击顶部导航栏的"返回"按钮可返回小程序');
		},
		
		onShow() {
			// 页面显示时隐藏默认导航栏
			uni.hideHomeButton && uni.hideHomeButton();
		},
		
		beforeDestroy() {
			this.addLog('info', 'Web View 测试页面即将销毁');
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-top: 0;
	}
	
	/* 自定义导航栏 */
	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 20rpx;
		background-color: #fff;
		position: relative;
		z-index: 999;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.nav-left, .nav-right {
		display: flex;
		align-items: center;
		padding: 10rpx;
	}
	
	.nav-text {
		margin-left: 10rpx;
		font-size: 30rpx;
		color: #333;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.page-header {
		text-align: center;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.warning-section {
		background-color: #fff9f0;
		border: 2rpx solid #ffd7b5;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.warning-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.warning-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #ff6600;
		margin-left: 10rpx;
	}
	
	.warning-content {
		font-size: 26rpx;
		color: #666;
	}
	
	.info-section {
		background-color: #e6f7ff;
		border: 2rpx solid #91d5ff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.info-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.info-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #1e90ff;
		margin-left: 10rpx;
	}
	
	.info-content {
		font-size: 26rpx;
		color: #666;
	}
	
	.webview-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.webview-header {
		text-align: center;
		margin-bottom: 20rpx;
	}
	
	.webview-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.webview-wrapper {
		width: 100%;
		height: 500rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.webview-info {
		padding: 10rpx 0;
	}
	
	.info-row {
		display: flex;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}
	
	.label {
		width: 180rpx;
		color: #666;
	}
	
	.url-text {
		flex: 1;
		color: #1e90ff;
		word-break: break-all;
	}
	
	.status-text {
		color: #ff6600;
		font-weight: bold;
	}
	
	.permission-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.permission-content {
		font-size: 26rpx;
	}
	
	.permission-item {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.permission-number {
		color: #1e90ff;
		font-weight: bold;
		margin-right: 10rpx;
	}
	
	.permission-desc {
		color: #666;
		flex: 1;
	}
	
	.controls {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.control-btn {
		flex: 1;
		min-width: 30%;
		margin: 10rpx;
		height: 70rpx;
		background-color: #1e90ff;
		color: #fff;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	
	.notes-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.notes-content {
		font-size: 26rpx;
	}
	
	.note-item {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.note-number {
		color: #1e90ff;
		font-weight: bold;
		margin-right: 10rpx;
	}
	
	.note-desc {
		color: #666;
		flex: 1;
	}
	
	.log-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.clear-log {
		font-size: 26rpx;
		color: #1e90ff;
	}
	
	.log-container {
		height: 300rpx;
		background-color: #000;
		border-radius: 10rpx;
		padding: 10rpx;
		font-family: monospace;
	}
	
	.log-item {
		font-size: 24rpx;
		margin-bottom: 5rpx;
		word-break: break-all;
		line-height: 1.4;
	}
	
	.log-info {
		color: #00ff00;
	}
	
	.log-warn {
		color: #ffff00;
	}
	
	.log-error {
		color: #ff0000;
	}
	
	.log-time {
		margin-right: 10rpx;
	}
	
	.log-content {
		color: #fff;
	}
</style>